import React, { useState, useEffect } from 'react'
import './index.css'
import food1 from '../../../static/img/food/food1.gif';
import { useNavigate } from 'react-router-dom';
import { Popconfirm, message } from 'antd';
import axios from 'axios';

export default function Browse() {
    const [browseData, setbrowseData] = useState([])
    useEffect(() => {
        axios.post('http://localhost:3001/mycenter/browse').then((res) => {
            setbrowseData(res.data)
        })
    }, [])
    const navigate = useNavigate()
    function lookCommodity(num) {
        return () => {
            navigate('/tocar?' + num)
        }
    }
    function delmes(good_id) {
        return () => {
            axios.post('http://localhost:3001/mycenter/delBrowse', { good_id }).then((res) => {
                if (res.data.code == 1) {
                    const newbrowseData = [...browseData];
                    newbrowseData.forEach((v, i) => {
                        if (v.good_id === good_id) {
                            newbrowseData.splice(i, 1)
                        }
                    })
                    setbrowseData(newbrowseData);
                    message.success('删除成功');
                }
            })
        }
    }
    //点击购物车小图标的按钮弹出加入购物车的弹窗
    const [ischoceshop, setchoceshop] = useState({ id: '', nowprice: '', oldprice: '' })
    function addcar(id, nowprice, oldprice) {
        console.log(id);
        const carwindow = document.getElementsByClassName('C-modul')[0]
        carwindow.className = 'C-modulshow'

        setchoceshop({ id: id, nowprice: nowprice, oldprice: oldprice })
    }
    // 点击弹窗的加入购物车的按钮
    const [countaddcar, setaddcar] = useState(0)
    function addtocar() {
        setaddcar(0)
        const a = countarr.kmg.filter(v => {
            return v.ischeck === true
        })
        if (countaddcar === 0) {
            message.success('请选择数量');
        } else {
            const addshop = { g_id: ischoceshop.id, u_id: '1', g_num: countaddcar, g_g: a[0].mg }
            console.log(addshop);
            const modul = document.getElementsByClassName('C-modulshow')[0]
            modul.className = 'C-modul'
            axios.post('http://localhost:3001/addShopcar', { g_id: ischoceshop.id, u_id: '1', g_num: countaddcar, g_g: a[0].mg }).then((res) => {
                console.log(res);
            })
        }


    }
    //初始化规格
    //选择加入购物车规格变色
    const [countarr, setcountarr] = useState({
        kmg: [],
    })
    useEffect(() => {

        setcountarr({
            kmg: [
                { mg: 500, ischeck: false },
                { mg: 1000, ischeck: false },
                { mg: 1500, ischeck: false },
                { mg: 2000, ischeck: false }
            ]
        })
    }, [])
    //点击减号购物车-1
    function loseone() {
        if (countaddcar > 0) {
            setaddcar(countaddcar - 1)
        } else {
            setaddcar(0)
        }
    }
    //点击改变选择规格的边框和背景
    function ischocemg(i) {
        const ischoceit = JSON.parse(JSON.stringify(countarr))
        for (let index = 0; index < ischoceit.kmg.length; index++) {
            ischoceit.kmg[index].ischeck = false
        }
        ischoceit.kmg[i].ischeck = !ischoceit.kmg[i].ischeck
        setcountarr(ischoceit)
    }
    return (
        <div className='brows'>
            <h3 className="tt">最近浏览</h3>
            <ul className="homeLi-main">
                {browseData.map((browseData, i) => {
                    return <li key={i}>
                        <Popconfirm
                            title="你确定要删除这条信息吗?"
                            onConfirm={delmes(browseData.good_id)}
                            okText="删除"
                            cancelText="取消">
                            <span className="fa fa-times-circle delBtn"></span>
                        </Popconfirm>
                        <img src={browseData.img} alt="" />
                        <h3 onClick={lookCommodity(browseData.id)}>{browseData.title}</h3>
                        <h4>{browseData.tip}</h4>
                        <span className="new_price">￥{browseData.new_price}</span><span className="old_price">￥{browseData.old_price}</span><i className="fa fa-shopping-cart" onClick={() => addcar(browseData.id, browseData.new_price, browseData.old_price)}></i>
                    </li>
                })}
            </ul>
            <div className="C-modul">
                <h4>请选择产品规格</h4>
                <hr />
                <div className="nowprice">
                    <strong>现价：￥{ischoceshop.nowprice}</strong>&nbsp;&nbsp;&nbsp;<span>原价：{ischoceshop.oldprice}</span>
                </div>
                <div className="chocekg">
                    <div className="ischocekg">请选择规格</div>
                    {
                        countarr.kmg.map((v, i) => {
                            return (
                                <div className={v.ischeck ? 'kgnum1' : 'kgnum'} onClick={() => ischocemg(i, v.mg)} key={i}>{v.mg}</div>
                            )
                        })
                    }

                    <div className="addchar">
                        <div className="ischocekg">数量:</div>
                        <div className="addnum">
                            <div className="losenum" onClick={loseone}><i className='fa fa-minus'></i></div>
                            <div className="carnums">{countaddcar}</div>
                            <div className="losenum" onClick={() => setaddcar(countaddcar + 1)}><i className='fa fa-plus'></i></div>
                        </div>
                        <div className="to-cart" onClick={addtocar}>
                            添加到购物车
                        </div>

                    </div>

                </div>
            </div>
        </div>
    )
}
